<template>
  <div>
    <el-upload
      class="upload-demo"
      drag
      :limit="1"
      :before-upload="handleBeforeUploadVideo"
      :http-request="requestFile"
      :on-remove="removeFile"
      action="">


      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>

      </div>
    </el-upload>
    <img :src="fileName">
    <!-- 进度条 -->
    <el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
    <el-button id="myBtn" v-if="progressFlag" size="mini">{{ buttonText }}</el-button>
  </div>
</template>


<script>
import {getUpToken} from "@/api/file/upload";
import {v4 as uuidv4} from 'uuid';
import * as qiniu from 'qiniu-js'

export default {
  data() {
    return {

      fileName: '',
      loadProgress: 0, // 动态显示进度条
      progressFlag: false, // 关闭进度条
      buttonText: "暂停上传",
      upToken: null,
      images: null,
       domainAddress: 'http://rce0b4axx.hb-bkt.clouddn.com//'
    };
  },
  methods: {
    //移除文件
    removeFile() {
      this.progressFlag = false;
      this.buttonText = "暂停上传";
    },
    //上传之前
    handleBeforeUploadVideo(file) {
      //上传之前重新获取uptoken以免过期
      // console.log(file)
      this.progressFlag = true;
    },
    getUp() {
      getUpToken().then(res => {
        this.upToken = res;
        console.log("后台获取token--", this.upToken);
      });
    },
    //
    uploadWithSDK(token, putExtra, config, domain, file) {
      let that = this;
      console.log("token,", token);
      console.log("putExtra,", putExtra);
      console.log("config,", config);
      console.log("domain,", domain);
      console.log("file,", file);
      if (file) {
        let key = uuidv4() + file.name;
        // putExtra.customVars["x:name"] = key.split(".")[0];
        // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
        let error = function (err) {
          console.log(err);
        };

        let complete = function (res) {
          console.log(res);
          that.fileName = that.domainAddress + res.key;

          // alert(that.fileName)


        };

        let next = function (response) {
          console.log(response);
          that.loadProgress = response.total.percent;
        };

        let subObject = {
          next: next,
          error: error,
          complete: complete
        };
        // 调用sdk上传接口获得相应的observable，控制上传和暂停
        let observable = qiniu.upload(file, key, token, putExtra, config);
        let subscription = observable.subscribe(subObject);

        //监听按钮事件，控制上传
        that.$nextTick(function () {
          document.getElementById("myBtn").addEventListener("click", function () {
            console.log("1111111111111111111111111111111111111111")
            if (that.buttonText == "暂停上传") {
              that.buttonText = "继续上传";
              subscription.unsubscribe();
            } else if (that.buttonText = "继续上传") {
              that.buttonText = "暂停上传";
              subscription = observable.subscribe(subObject);
            }
          });
        })

      }

    },
    requestFile(param) {
      console.log("request,", param)
      let file = param.file;
      //uptoken
      let token = this.upToken;
      //外链域名
      let domain = this.domainAddress;
      //可以配置分片大小等配置，具体查看官方文档
      let config = {
        useCdnDomain: false,//是否使用CDN加速域名
        disableStatisticsReport: false,//是否禁用日志报告
        retryCount: 6,//上传自动重试次数
        chunkSize: "4"// 每片大小
      };
      let putExtra = {
        customVars: {}
      };
      this.uploadWithSDK(token, putExtra, config, domain, file)
    }
  },
  created() {
    this.getUp();
  }
}
</script>
